<template>
  <div>
    <h1 style="text-align: center">角色列表</h1>
    <!--新增按钮  点击跳转到角色新增 -->
    <!-- 请求数据 先去request获取所有角色 -->
    <el-button type="primary" 
    v-permission="{path: '/role/add', name: '角色添加'}"
    @click="$router.push('/role/add')"
      >角色新增</el-button
    >
    <el-table :data="roleList" style="width: 100%">
      <el-table-column prop="name" label="角色名称" width="180">
      </el-table-column>
      <el-table-column width="180">
        <!-- 权限 -->
        <template slot-scope="scope">
          <el-tree :data="scope.row.auths" :props="defaultProps"></el-tree>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- 编辑需要有用户id 使用resful风格  跳转到别的页面编辑-->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            v-permission="{path: '/role/edit', name: '角色编辑'}"
            @click="$router.push('/role/edit/' + scope.row._id)"
            >编辑</el-button
          >
          <!-- 需要参数 传 id -->
          <el-button 
          v-permission="{path: '/role/del', name: '角色删除'}"
          size="mini" type="danger" @click="Delete(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 角色删除 对话框做 -->
    <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%">
      <span>真的要残忍的将我删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <!-- 点击确定发送请求删除数据   数据库数据也删除  发请求 -->
        <el-button type="primary" @click="del">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 导入获取所有角色函数  角色删除
import { RoleList, RoleDel } from "@/request";
//导入按钮自定义指令权限  函数
import permission from '@/utils/permission'

export default {
    //使用自定义指令 值是一个对象  键是自定义指令的名字
   directives: {
      //也应该是一个对象  当只有bind和updated 可以简写 第一次绑定和修改时会使用的数据  经常情况下这两个函数是一样的可以简写成一个函数
      //需要有参数  el binding  键和值相等可以简写
      permission
      
  },
  data() {
    return {
      // 删除对话框  默认情况下隐藏
      dialogVisible1: false,
      //定义数据
      roleList: [],
      defaultProps: {
        children: "children",
        label: "name",
        id: ''
      },
    };
  },
  methods: {
    // 删除点击取消 对话框隐藏
    quxiao() {
      this.dialogVisible1 = false;
    },
    //点击删除对话框 确定按钮
    async del() {
      //点击确定
       //传id
      let data = await RoleDel(this.id)
      // console.log(data);
       
      //判断删除成功或失败 提示
      let { error_code, msg } = data;
      // 成功
      if (error_code === 200) {
        this.$message({
          type: "success",
          duration: 1500,
          message: msg,
          onClose: () => {
           this.dialogVisible1 = false;
            this.$router.push("/role/list");
            //删除成功重新渲染页面
             this.getRoleList();
          },
        });
        // 新增失败
      } else {
        this.$message({
          type: "error",
          duration: 1500,
          message: msg,
        });
      }
    },
    /// 点击删除发送请求 需要传id
    Delete(id) {
      //对话框显示
      this.dialogVisible1 = true;
      this.id = id
    },
    //定义方法
    async getRoleList() {
      //等待  到数据
      let data = await RoleList();
      //  数据获取成功 赋值给 authList  有数据可以渲染了
      this.roleList = data.data.rolelist;
    },
  },
  //生命周期中调用
  created() {
    this.getRoleList();
  },
};
</script>

<style>
</style>
